<div cdkOverlayOrigin
  apes-select-top-control
  tabindex="0"
  class="apes-select-selection"
  [apesOpen]="open"
  [apesNoAnimation]="noAnimation?.apesNoAnimation"
  [apesMaxTagPlaceholder]="apesMaxTagPlaceholder"
  [apesPlaceHolder]="apesPlaceHolder"
  [apesAllowClear]="apesAllowClear"
  [apesMaxTagCount]="apesMaxTagCount"
  [apesShowArrow]="apesShowArrow"
  [apesLoading]="apesLoading"
  [apesCustomTemplate]="apesCustomTemplate"
  [apesSuffixIcon]="apesSuffixIcon"
  [apesClearIcon]="apesClearIcon"
  [apesRemoveIcon]="apesRemoveIcon"
  [apesShowSearch]="apesShowSearch"
  [apesTokenSeparators]="apesTokenSeparators"
  [class.apes-select-selection--single]="apesSelectService.isSingleMode"
  [class.apes-select-selection--multiple]="apesSelectService.isMultipleOrTags"
  (keydown)="onKeyDown($event)">
</div>
<ng-template
  cdkConnectedOverlay
  apesConnectedOverlay
  [cdkConnectedOverlayHasBackdrop]="true"
  [cdkConnectedOverlayMinWidth]="apesDropdownMatchSelectWidth? null : triggerWidth"
  [cdkConnectedOverlayWidth]="apesDropdownMatchSelectWidth? triggerWidth : null"
  [cdkConnectedOverlayOrigin]="cdkOverlayOrigin"
  (backdropClick)="closeDropDown()"
  (detach)="closeDropDown();"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayOpen]="open">
  <div
    class="apes-select-dropdown"
    [class.apes-select-dropdown--single]="apesSelectService.isSingleMode"
    [class.apes-select-dropdown--multiple]="apesSelectService.isMultipleOrTags"
    [class.apes-select-dropdown-placement-bottomLeft]="dropDownPosition === 'bottom'"
    [class.apes-select-dropdown-placement-topLeft]="dropDownPosition === 'top'"
    [apesClassListAdd]="[apesDropdownClassName]"
    [@slideMotion]="dropDownPosition"
    [apesNoAnimation]="noAnimation?.apesNoAnimation"
    [ngStyle]="apesDropdownStyle">
    <div apes-option-container
      style="overflow: auto;transform: translateZ(0px);"
      (keydown)="onKeyDown($event)"
      [apesMenuItemSelectedIcon]="apesMenuItemSelectedIcon"
      [apesNotFoundContent]="apesNotFoundContent"
      (apesScrollToBottom)="apesScrollToBottom.emit()">
    </div>
    <ng-template [ngTemplateOutlet]="apesDropdownRender"></ng-template>
  </div>
</ng-template>
<!--can not use ViewChild since it will match sub options in option group -->
<ng-template>
  <ng-content></ng-content>
</ng-template>
